<template>
    <div class="app-container">
        <el-row class="mb8">
            <el-col :span="1.5">
                <el-icon color="skyblue" size="large"
                    ><ArrowRightBold
                /></el-icon>
            </el-col>
            <el-col :span="1.5">
                <el-text class="mx-1" type="primary" style="font-weight: bold"
                    >未收款订单</el-text
                >
            </el-col>
            <right-toolbar
                v-model:showSearch="showSearch"
                @queryTable="getList"
            ></right-toolbar>
        </el-row>

        <el-table
            v-loading="loading"
            :data="ordeList"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="订单号" align="center" prop="recordId" />
            <el-table-column label="所属分店" align="center" prop="shopName">
                <template #default="scope">
                    <dict-tag :options="shop" :value="scope.row.shopName" />
                </template>
            </el-table-column>
            <el-table-column label="客户姓名" align="center" prop="vipName" />
            <el-table-column label="联系电话" align="center" prop="vipTel" />
            <el-table-column
                label="客户地址"
                align="center"
                prop="vipXiangxi"
            />
            <el-table-column label="客户属性" align="center" prop="vipProperty">
                <template #default="scope">
                    <dict-tag
                        :options="vip_property"
                        :value="scope.row.vipProperty"
                    />
                </template>
            </el-table-column>
            <el-table-column label="价格" align="center" prop="price" />
            <el-table-column label="客户类型" align="center" prop="vipType">
                <template #default="scope">
                    <dict-tag :options="vip_type" :value="scope.row.vipType" />
                </template>
            </el-table-column>
            <el-table-column
                label="服务类型"
                align="center"
                prop="staffProperty"
            >
                <template #default="scope">
                    <dict-tag
                        :options="staff_property"
                        :value="scope.row.staffProperty"
                    />
                </template>
            </el-table-column>
            <el-table-column
                label="期望时间"
                align="center"
                prop="wishTime"
                width="180"
            >
                <template #default="scope">
                    <span>{{
                        parseTime(scope.row.wishTime, "{y}-{m}-{d}")
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="上门时间" align="center" prop="outTime" />
            <el-table-column label="服务阿姨" align="center" prop="staffName" />
            <el-table-column
                label="是否收款"
                align="center"
                prop="ynMoney"
                width="100"
            >
                <template #default="scope">
                    <!-- <dict-tag :options="yn_money" :value="scope.row.ynMoney" /> -->
                    <span v-if="scope.row.ynMoney == 0">
                        <el-button type="primary" @click="receive(scope.row)"
                            >确认收款</el-button
                        >
                    </span>
                    <span v-else> 已收款{{ scope.row.price }}元 </span>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 添加或修改收款对话框 -->
        <el-dialog
            v-if="title == '确认收款'"
            :title="title"
            v-model="open"
            width="400px"
            center
        >
            <el-form ref="ordeRef" :model="form" :rules="rules">
                <el-row>
                    <el-col>
                        <el-row>
                            <el-col span="12">
                                <span
                                    style="
                                        margin-right: 10px;
                                        margin-left: 75px;
                                    "
                                    >订单号：{{ form.recordId }},</span
                                >
                                <span>客户：{{ form.vipName }}</span>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col style="margin-top: 20px">
                        <el-row>
                            <el-col>
                                <span style="margin-left: 75px"
                                    >应收款：<span style="color: #ff9821"
                                        >{{ form.price }}.00元</span
                                    ></span
                                >
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-form-item
                        prop="ynMoney"
                        style="margin-left: 80px; margin-top: 30px"
                    >
                        <el-input v-model="form.ynMoney"></el-input>
                    </el-form-item>
                    <el-col style="margin-top: 45px">
                        <el-row>
                            <el-col>
                                <el-button
                                    type="primary"
                                    style="margin-left: 135px"
                                    @click="receiveTime(form)"
                                    >确认收款</el-button
                                >
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup name="Orde">
    import {
        listOrde,
        getOrde,
        delOrde,
        addOrde,
        updateOrde
    } from "@/api/system/orderr";

    const { proxy } = getCurrentInstance();
    const {
        vip_property,
        time,
        status_orde,
        status,
        shop,
        orde_source,
        staff_property,
        vip_type
    } = proxy.useDict(
        "vip_property",
        "time",
        "status_orde",
        "status",
        "shop",
        "orde_source",
        "staff_property",
        "vip_type"
    );

    const ordeList = ref([]);
    const open = ref(false);
    const loading = ref(true);
    const showSearch = ref(true);
    const ids = ref([]);
    const single = ref(true);
    const multiple = ref(true);
    const total = ref(0);
    const title = ref("");

    const data = reactive({
        form: {},
        queryParams: {
            pageNum: 1,
            pageSize: 10
        },
        rules: {}
    });

    const { queryParams, form, rules } = toRefs(data);

    /** 查询收款列表 */
    function getList() {
        loading.value = true;
        listOrde(queryParams.value).then((response) => {
            ordeList.value = response.rows;
            total.value = response.total;
            loading.value = false;
        });
    }

    // 取消按钮
    function cancel() {
        open.value = false;
        reset();
    }

    // 表单重置
    function reset() {
        form.value = {
            recordId: null,
            shopName: null,
            vipName: null,
            vipTel: null,
            vip1Name: null,
            vip1Tel: null,
            vipSheng: null,
            vipShi: null,
            vipQu: null,
            vipXiangxi: null,
            vipType: null,
            vipProperty: null,
            ordeSource: null,
            profit: null,
            price: null,
            dangerMoney: null,
            staffProperty: null,
            wishTime: null,
            time: null,
            buildType: null,
            houseType: null,
            vipTag: null,
            vipRemark: null,
            outTime: null,
            staffName: null,
            receiveTime: null,
            sendTime: null,
            statusOrde: null,
            ynMoney: null,
            status: null
        };
        proxy.resetForm("ordeRef");
    }

    /** 搜索按钮操作 */
    function handleQuery() {
        queryParams.value.pageNum = 1;
        getList();
    }

    /** 重置按钮操作 */
    function resetQuery() {
        proxy.resetForm("queryRef");
        handleQuery();
    }

    // 多选框选中数据
    function handleSelectionChange(selection) {
        ids.value = selection.map((item) => item.recordId);
        single.value = selection.length != 1;
        multiple.value = !selection.length;
    }

    /** 新增按钮操作 */
    function handleAdd() {
        reset();
        open.value = true;
        title.value = "添加收款";
    }

    /** 修改按钮操作 */
    function handleUpdate(row) {
        reset();
        const _recordId = row.recordId || ids.value;
        getOrde(_recordId).then((response) => {
            form.value = response.data;
            open.value = true;
            title.value = "修改收款";
        });
    }

    /** 提交按钮 */
    function submitForm() {
        proxy.$refs["ordeRef"].validate((valid) => {
            if (valid) {
                if (form.value.recordId != null) {
                    updateOrde(form.value).then((response) => {
                        proxy.$modal.msgSuccess("修改成功");
                        open.value = false;
                        getList();
                    });
                } else {
                    addOrde(form.value).then((response) => {
                        proxy.$modal.msgSuccess("新增成功");
                        open.value = false;
                        getList();
                    });
                }
            }
        });
    }

    /** 删除按钮操作 */
    function handleDelete(row) {
        const _recordIds = row.recordId || ids.value;
        proxy.$modal
            .confirm('是否确认删除收款编号为"' + _recordIds + '"的数据项？')
            .then(function () {
                return delOrde(_recordIds);
            })
            .then(() => {
                getList();
                proxy.$modal.msgSuccess("删除成功");
            })
            .catch(() => {});
    }

    /** 导出按钮操作 */
    function handleExport() {
        proxy.download(
            "system/orderr/export",
            {
                ...queryParams.value
            },
            `orde_${new Date().getTime()}.xlsx`
        );
    }

    function receive(row) {
        console.log(row);
        open.value = true;
        title.value = "确认收款";
        reset();
        const _recordId = row.recordId || ids.value;

        getOrde(_recordId).then((response) => {
            form.value = response.data;
        });
        console.log(form);
    }

    function receiveTime(row) {
        if (row.ynMoney == 1) {
            let date = new Date();
            row.receiveTime = date;
        }

        submitForm();
    }

    getList();
</script>
